<template>
  <v-base :base-title="'自定义滚动条'">
    <template slot="baseinfo">
      内容超出时，隐藏原生滚动条，显示自定义滚动条
    </template>
    <template slot="baseform">
      <div class="scroll-content">
        <div class="scroll-bar" v-if="isShowBarHeight" ref='scrollBar' :style="{height: barHeightStr}"></div>
        <div class="act-content" ref="scrollE">
          <div class="test-content">
            dfdsdf
          </div>
        </div>
      </div>
    </template>
  </v-base>
</template>
<script>
  import base from './base.vue';
  export default{
    data () {
      return {
        demo_normal: '<v-uploadfile></v-uploadfile>',
        barHeight: 0,
        isCanMove: false,
        current: null,
        isShowBarHeight: true
      };
    },
    computed: {
      barHeightStr: function () {
        return this.barHeight + 'px';
      }
    },
    methods: {
      getAbsolutePos (node) {
        var left = node.offsetLeft; // 获取元素相对于其父元素的left值var left
        var top = node.offsetTop;
        this.current = node.offsetParent; // 取得元素的offsetParent
        // 一直循环直到根元素
        while (this.current != null) {
          left += this.current.offsetLeft;
          top += this.current.offsetTop;
          this.current = this.current.offsetParent;
        }
        return {
          'left': left,
          'top': top
        };
      }
    },
    components: {
      'v-base': base
    },
    mounted: function () {
      let self = this;
      let offsetY = 0;
      let isCanMove = false;
      let scrollBar = this.$refs.scrollBar;
      let scrollE = this.$refs.scrollE;
      let scrollH = (scrollE.scrollHeight - scrollE.offsetHeight);
      this.barHeight = parseInt((scrollE.offsetHeight * scrollE.offsetHeight) / scrollE.scrollHeight);
      if (this.barHeight === scrollE.offsetHeight) {
        this.isShowBarHeight = false;
      }
      let scrollRegionY = scrollE.offsetHeight - self.barHeight;
      let scrollEvent = function (e) {
        scrollBar.style.top = (this.scrollTop * (scrollRegionY)) / scrollH + 'px';
      }
      let scrollEY = this.getAbsolutePos(scrollE).top;
      scrollE.addEventListener('scroll', scrollEvent);
      scrollBar.addEventListener('mousedown', function (e) {
        e.stopPropagation();
        e.preventDefault();
        isCanMove = true;
        offsetY = e.offsetY;
        scrollE.removeEventListener('scroll', scrollEvent);
        return false;
      });
      window.addEventListener('mousemove', function (e) {
        if (isCanMove) {
          let scrollBarTop = e.pageY - scrollEY - offsetY;
          if (scrollBarTop >= scrollRegionY) {
            scrollBarTop = scrollRegionY;
          }
          if (scrollBarTop < 0) {
            scrollBarTop = 0;
          }
          scrollBar.style.top = scrollBarTop + 'px';
          scrollE.scrollTop = (scrollBar.offsetTop * scrollH / ((scrollRegionY)));
        }
      });
      window.addEventListener('mouseup', function () {
        isCanMove = false;
        scrollE.addEventListener('scroll', scrollEvent);
      });
    }
  };
</script>
<style scoped>
  .scroll-content{
    position: relative;
    height: 400px;
    overflow: hidden;
    background-color: lightgray;
  }
  .scroll-content>
  .scroll-bar{
    position: absolute;
    height: 50px;
    width: 5px;
    right: 0;
    top: 0;
    border-radius: 10px;
    background-color: blue;
  }
  .scroll-content>
  .scroll-bar:active{
    background-color: red;
    cursor: pointer;
  }
  .scroll-content>
  .act-content{
    box-sizing: border-box;
    height: 400px;
    width: 101%;
    overflow-y: auto;
    padding-right: 5px;
    background-color: lightblue;
  }
  .scroll-content>
  .act-content>
  .test-content{
    box-sizing: border-box;
    height: 100px;
  }
</style>
